<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/resrt.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <title>Document</title>
</head>

<body>
    <!-- 点击注册得模态框蒙版 -->
    <div class="model_zhuce"></div>
    <!-- 蒙版里面得内容 -->
    <div id="model">
        <div class="modal-content">
            <header id="header">
                <span class="span1">协议声明</span>
                <span class="iconfont icon-cuowuguanbiquxiao-yuankuang" id="vanish"></span>
            </header>
            <div id="bigbox">
                <div class="top">
                    <a href="#">《小米商城用户协议》</a>、<a href="">《小米商城隐私政策》</a>、<a href="">《小米帐号用户协议》</a>、<a
                        href="">《小米帐号隐私政策》、</a>请您仔细阅读以上协议，其中有对您权利义务的特别约定等重要条款，同意后方可使用本软件
                </div>
                <div id="smallbox">
                    <div id="smallboxson">
                        <p class="p1">小米商城用户协议</p>
                        <p class="p2">版本公示日期：2021年9月12日</p>
                        <p class="p3">版本生效日期：2021年9月19日</p>
                        <p class="p4">
                            《小米商城用户协议》（以下简称“本协议”）是您（或称“用户”，指注册、登录、使用、浏览小米商城的个人或组织）与小米科技有限责任公司（平台运营主体）及其关联公司（包括但不限于小米通讯技术有限公司，以下简称“小米”）及其合作单位（包括但不限于第三方商家）之间关于小米商城网站（域名为www.mi.com，简称本网站）与小米产品、程序及服务所订立的协议。小米和合作单位分别就您在本网站接受服务的过程中享受的权利和承担的义务，与您签订本协议，并独立向您承担责任，互不承担保证、连带或共同责任等。
                        </p>
                    </div>
                </div>
                <footer id="footer">
                    <button class="btn_agree">同意</button>
                    <button class="btn_disagree">不同意</button>
                </footer>
            </div>
        </div>
    </div>

    <!-- 头部 -->
    <header class="header">
        <div class="h-header w">
            <ul class="heaer-left">
                <li><a href="#">小米商城 <span>|</span></a></li>
                <li><a href="#">MIUI <span>|</span></a></li>
                <li><a href="#">IoT <span>|</span></a></li>
                <li><a href="#">云服务<span>|</span></a></li>
                <li><a href="#">天星数科<span>|</span></a></li>
                <li><a href="#">有品<span>|</span></a></li>
                <li><a href="#">小爱开放平台<span>|</span></a></li>
                <li><a href="#">企业团购<span>|</span></a></li>
                <li><a href="#">物资证照<span>|</span></a></li>
                <li><a href="#">协议规则<span>|</span></a></li>
                <li><a href="#">下载app<span>|</span></a></li>
                <li><a href="#">智能生活<span>|</span></a></li>
                <li><a href="#" class="last">Select Location</a></li>
            </ul>

            <ul class="header-right">
                <li><a href="../html/login.html">登录<span>|</span></a></li>
                <li class="register"><a href="../html/login.html">注册<span>|</span></a></li>
                <li><a href="#">消息通知</a></li>
                <li class="header-left-li">
                    <a href="../html/shopingcar.html" class="bian_orange">
                        <span class="iconfont icon-gouwuche"></span>
                        购物车
                        <span class="kuhao">(0)</span>
                    </a>
                    <div class="about_car">购物车中还没有商品，赶紧选购吧！</div>
                </li>
            </ul>
        </div>

    </header>
    <!-- 头部二 -->

    <div class="site-header">
        <div class="b-header w">
            <div class="header-logo">
                <img src="../img/logo-mi2.png" alt="">
            </div>

            <ul class="header-nav">
                <li><a href="#">Xiaomi手机</a>
                    <div class="nav-list">
                        <ul class="wrap1 w">
                            <!-- <li>
                                <div class="nav-top">
                                    <img src="../img/ia_10379.png" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">Xiaomi 12 Pro</p>
                                    <p class="nav-price price-color">4699元起</p>
                                </div>
                            </li> -->

                        </ul>
                    </div>
                </li>

                <li class="li1"><a href="#">Redmi 红米</a>
                    <div class="nav-list">
                        <ul class="wrap2 w">
                            <!-- <li>
                                <div class="nav-top">
                                    <img src="../img/ia_10385.png" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">Xiaomi 12 Pro</p>
                                    <p class="nav-price price-color">4699元起</p>
                                </div>
                            </li> -->

                        </ul>
                    </div>
                </li>

                <li class="li2"><a href="#">电视</a>
                    <div class="nav-list">
                        <ul class="wrap3 w">
                            <!-- <li>
                                <div class="nav-top">
                                    <img src="../img/ia_10392.png" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">Xiaomi 12 Pro</p>
                                    <p class="nav-price price-color">4699元起</p>
                                </div>
                            </li> -->

                        </ul>
                    </div>
                </li>

                <li class="li3"><a href="#">笔记本</a>
                    <div class="nav-list">
                        <ul class="wrap4 w">
                            <!-- <li>
                                <div class="nav-top">
                                    <img src="../img/ia_10398.png" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">Xiaomi 12 Pro</p>
                                    <p class="nav-price price-color">4699元起</p>
                                </div>
                            </li> -->

                        </ul>
                    </div>
                </li>

                <li class="li4"><a href="#">平板</a>
                    <div class="nav-list">
                        <ul class="wrap5 w">
                            <!-- <li>
                                <div class="nav-top">
                                    <img src="../img/ia_10396.png" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">Xiaomi 12 Pro</p>
                                    <p class="nav-price price-color">4699元起</p>
                                </div>
                            </li> -->

                        </ul>
                    </div>
                </li>

                <li class="li5"><a href="#">家电</a>
                    <div class="nav-list">
                        <ul class="wrap6 w">
                            <!-- <li>
                                <div class="nav-top">
                                    <img src="../img/ia_10393.png" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">Xiaomi 12 Pro</p>
                                    <p class="nav-price price-color">4699元起</p>
                                </div>
                            </li> -->

                        </ul>
                    </div>
                </li>

                <li class="li6"><a href="#">路由器</a>
                    <div class="nav-list">
                        <ul class="wrap7 w">
                            <!-- <li>
                                <div class="nav-top">
                                    <img src="../img/ia_10601.webp" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">Xiaomi 12 Pro</p>
                                    <p class="nav-price price-color">4699元起</p>
                                </div>
                            </li> -->

                        </ul>
                    </div>
                </li>

                <li class="li7"><a href="#">服务</a>
                    <!-- <div class="nav-list"></div> -->
                </li>

                <li class="li8"><a href="#">社区</a>
                    <!-- <div class="nav-list"></div> -->
                </li>

            </ul>
            <div class="header-search">
                <input type="text" placeholder="手机" class="input-button">
                <ul class="search-list">
                    <li><a href="#">全部商品</a></li>
                    <li><a href="#">小米平板5 Pro</a></li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">耳机</a></li>
                    <li><a href="#">显示器</a></li>
                    <li><a href="#">洗衣机</a></li>
                </ul>
                <input type="button" value="" class="big-button"><span class="iconfont icon-fangdajing"></span>
            </div>
        </div>

    </div>
</body>
<!-- <a href="../img/ia_10375.png"></a> -->

</html>
<script src="../js/jquery.js"></script>
<script>
    $('.header-nav>li>a').on('mouseenter', function () {
        // console.log($(this).parent());
        $(this).css('color', 'orange').parent().siblings().children("a").css('color', '#333');
        $(this).css('box-shadow', '2px 3px 6px rgba(0,0,0 0.18)')
        // console.log( $(this).parent('li').children(0));
        $(this).parent('li').children('div').slideDown("2000");

    })

    $('.header-nav>li>a').on('mouseleave', function () {
        // $(this).parent('li').children('.nav-list').hide()
        $(this).parent('li').children('div').slideUp("2000");
    })

    // 点击购物车的效果
    $('.header-left-li').on('mouseenter', function () {
        $(this).find('.bian_orange').css('color', 'orange')
        $(this).children(0).find('.icon-gouwuche').css('color', 'orange')
        $(this).css('background-color', 'white')
        $(this).children(0).find('.kuhao').css('color', 'orange')
        $(this).children(1).show()
    })
    $('.header-left-li').on('mouseleave', function () {
        $(this).find('.bian_orange').css('color', '#b0b0b0')
        $(this).children(0).find('.icon-gouwuche').css('color', '#b0b0b0')
        $(this).css('background-color', '#424242')
        $(this).children(0).find('.kuhao').css('color', '#b0b0b0')
        $(this).children(".about_car").hide()
    })


    // 搜索框的效果
    $('.input-button').on('focus', function () {
        $(this).next().show()
        $(this).parent().css('border-color', '#ff9147')
        $(this).siblings('.big-button').css('border-left-color', '#ff9147')
        $('.search-list>li').on('mouseenter', function () {
            $(this).css('background-color', '#e0e0e0').siblings('.search-list>li').css('background-color', '')
        })
    })

    $('.input-button').on('blur', function () {
        $(this).next().hide()
        $(this).parent().css('border-color', '#e0e0e0')
        $(this).siblings('.big-button').css('border-left-color', '#e0e0e0')
    })





    let register = document.querySelector(".register")
    let model_zhuce = document.querySelector(".model_zhuce");
    let model = document.querySelector("#model")
    let vanish = document.querySelector("#vanish")
    let btn_disagree = document.querySelector(".btn_disagree")
    // 点击注册弹出模态框
    register.addEventListener('click', function () {
        model_zhuce.style.display = "block";
        model.style.display = "block"
    })


    // 点击×号变色
    vanish.addEventListener('mouseenter', function () {
        this.style.color = "red"
    })
    vanish.addEventListener('mouseleave', function () {
        this.style.color = ""
    })
    // 点击❌号模态框进行隐藏
    vanish.addEventListener('click', function () {
        model_zhuce.style.display = "none";
        model.style.display = "none"
    })


    // 点击不同意模态框隐藏
    btn_disagree.addEventListener('click', function () {
        model_zhuce.style.display = "none";
        model.style.display = "none"
    })
    btn_disagree.addEventListener('mouseenter', function () {
        this.style.backgroundColor = "#333"
    })
    btn_disagree.addEventListener('mouseleave', function () {
        this.style.backgroundColor = ""
    })

    // 点击同意跳转到注册页面
    let oBtnAgree = document.querySelector(".btn_agree")
    oBtnAgree.onclick = function () {
        location.href = './login.html'
    }


    // 点击logo跳转至首页
    $(".header-logo").on("click", function () {
        location.href = '../html/homepage.html'
    })

// 小米手机
    getGoodsList11()
    function getGoodsList11() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "012" }, function (data) {
            // console.log(data);
            let htmlStr11 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr11 += `
                                <li>
                                    <div class="nav-top">
                                        <img src="${data[i].goodsImg}" alt="">
                                    </div>
                                    <div class="nav-bottom">
                                        <p class="nav-word">${data[i].goodsName}</p>
                                        <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                    </div>
                            </li>`
            }
            // console.log(htmlStr11);
            $(".wrap1").html(htmlStr11);
        }, "json");
    }

// 红米手机
    getGoodsList12()
    function getGoodsList12() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "013" }, function (data) {
            // console.log(data);
            let htmlStr12 = "";
            for (let i = 0; i < data.length; i++) {
                // console.log(data[i]);
                htmlStr12 += `
                                <li>
                                    <div class="nav-top">
                                        <img src="${data[i].goodsImg}" alt="">
                                    </div>
                                    <div class="nav-bottom">
                                        <p class="nav-word">${data[i].goodsName}</p>
                                        <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                    </div>
                            </li>`
            }
            // console.log(htmlStr12);
            $(".wrap2").html(htmlStr12);
        }, "json");
    }

// 电视
    getGoodsList13()
    function getGoodsList13() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "014" }, function (data) {
            // console.log(data);
            let htmlStr13 = "";
            for (let i = 0; i < data.length; i++) {
                // console.log(data[i]);
                htmlStr13 += `
                                <li>
                                    <div class="nav-top">
                                        <img src="${data[i].goodsImg}" alt="">
                                    </div>
                                    <div class="nav-bottom">
                                        <p class="nav-word">${data[i].goodsName}</p>
                                        <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                    </div>
                            </li>`
            }
            $(".wrap3").html(htmlStr13);
        }, "json");
    }



    // 笔记本
    getGoodsList14()
    function getGoodsList14() {
        console.log(111);

        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "015" }, function (data) {
            console.log(data);
            let htmlStr14 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr14 += `
                                <li>
                                    <div class="nav-top">
                                        <img src="${data[i].goodsImg}" alt="">
                                    </div>
                                    <div class="nav-bottom">
                                        <p class="nav-word">${data[i].goodsName}</p>
                                        <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                    </div>
                            </li>`
            }
            // console.log(htmlStr11);
            $(".wrap4").html(htmlStr14);
        }, "json");
    }


    // 平板
    getGoodsList15()
    function getGoodsList15() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "016" }, function (data) {
            // console.log(data);
            let htmlStr15 = "";
            for (let i = 0; i < data.length; i++) {
                // console.log(data[i]);
                htmlStr15 += `
                                <li>
                                    <div class="nav-top">
                                        <img src="${data[i].goodsImg}" alt="">
                                    </div>
                                    <div class="nav-bottom">
                                        <p class="nav-word">${data[i].goodsName}</p>
                                        <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                    </div>
                            </li>`
            }
            $(".wrap5").html(htmlStr15);
        }, "json");
    }


    // 家电
    getGoodsList16()
    function getGoodsList16() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "017" }, function (data) {
            // console.log(data);
            let htmlStr16 = "";
            for (let i = 0; i < data.length; i++) {
                // console.log(data[i]);
                htmlStr16 += `
                                <li>
                                    <div class="nav-top">
                                        <img src="${data[i].goodsImg}" alt="">
                                    </div>
                                    <div class="nav-bottom">
                                        <p class="nav-word">${data[i].goodsName}</p>
                                        <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                    </div>
                            </li>`
            }
            $(".wrap6").html(htmlStr16);
        }, "json");
    }

// 路由器
    getGoodsList17()
    function getGoodsList17() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "018" }, function (data) {
            // console.log(data);
            let htmlStr17 = "";
            for (let i = 0; i < data.length; i++) {
                // console.log(data[i]);
                htmlStr17 += `
                                <li>
                                    <div class="nav-top">
                                        <img src="${data[i].goodsImg}" alt="">
                                    </div>
                                    <div class="nav-bottom">
                                        <p class="nav-word">${data[i].goodsName}</p>
                                        <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                    </div>
                            </li>`
            }
            $(".wrap7").html(htmlStr17);
        }, "json");
    }
</script>